<script lang="tsx" >
import { LoadMap } from "@/utils/loadMap";
import { defineComponent, onMounted, PropType, reactive, ref, watch } from "vue";
import $api from '@/api'
import _ from "lodash";

export default defineComponent({
  props: {
    center: { type: Array as PropType<(number | string)[]>, default: [113.852640, 34.035506] },
    titleShow: { type: Boolean, default: true },
    editShow: { type: Boolean, default: false },
    title: { type: String as PropType<string>, default: '' },
    width: { type: String },
    height: { type: String },
    valChangeCallBack: { type: Function as PropType<(...args: any) => void>, default: () => { } },
  },

  setup(props, { emit }) {

    const state: IMap.IState = reactive({
      editShow: false,
      inputVal: '',
      center: [],
      map: {}
    })

    const changeEditClick = () => {
      state.editShow = !state.editShow
      !state.editShow && props.valChangeCallBack(state.inputVal, state.center)
    }

    watch(() => props.center, async () => {
      state.inputVal = props.title
      state.center = props.center
      state.map = await LoadMap(props.center, locationCallBack, props.editShow)
    })

    const locationCallBack = (val: string, center: number[]) => {
      state.inputVal = val;
      state.center = center;
    }

    const _debounceLngLatList = _.debounce(() => {
      $api.GetAmapLnglatList({ address: state.inputVal, batch: true }).then(res => {
        if (res.data?.count !== '0' && state.inputVal) {
          state.map.setCenter(res.data.geocodes[0].location.split(','))
          state.center = res.data.geocodes[0].location.split(',')
        }
      })
    }, 2000)


    onMounted(async () => {
      console.log(props.center);

      state.map = await LoadMap(props.center, locationCallBack, props.editShow)
    })

    const changeInput = () => {
      (state.inputVal && state.inputVal !== props.title) && _debounceLngLatList()
    }

    const leftChangeInput = () => {

      return <div class='area-edit'>
        详细地址： <el-input size="small" onInput={changeInput} v-model={state.inputVal} style={{ width: '80%' }} placeholder="输入详细地址或点击地图选取位置"></el-input>
      </div>
    }


    return () => (
      <>
        {props.titleShow &&
          <div class='title' style={{ width: props.width }}>
            <div class="left">
              {
                state.editShow ? leftChangeInput() : props.title || '暂无地址'
              }
            </div>
            {
              props.editShow &&
              <div class="right" onClick={changeEditClick}>
                {state.editShow ? '确认' : '修改'}
              </div>
            }
          </div>
        }
        <div class="map" style={{ width: 'calc(' + props.width + ' - 10px )' }}>
          <div id="container" style={{ width: '100%', height: props.height }}></div>
        </div>
      </>
    )
  }
})
</script>

<style lang="scss" scoped>
.comp-map {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.map {
  background: #fff;
  border: 1px solid rgb(219, 218, 218);
  padding: 5px;
  width: 100%;
}

.title {
  @include setInputHeight(30px);
  position: relative;
  margin-top: -10px;
  border: 1px solid rgb(219, 218, 218);
  top: 10px;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px !important;
  background: #fff;
  color: #777;
  box-shadow: 0 12px 12px -5px rgba(0, 0, 0, 0.1);

  .left {
    margin-left: 15px;
    width: 90%;
  }

  .right {
    width: 8%;
    text-align: right;
    margin-right: 15px;
    letter-spacing: 1px;
    cursor: pointer;

    &:hover {
      color: var(--primary-color);
    }
  }
}

.area-edit {
  display: flex;
  align-items: center;
}
</style>